<!DOCTYPE html>
<html  lang="en">
    <head>
        <title>Document</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
        <style>
            /* 
            @keyframes      关键帧动画声明
            move-in         动画名称
            0% {}、100%{}   第 ( 总时间 * x% )s 时的过渡状态
             */
            @keyframes move-in {
                0% {
                /* 透明度 */
                opacity: 0;
                /* 过渡形式 */
                transform: translateX(100px);
                }

                100% {
                opacity: 1;
                transform: translateX(0px);
                }
            }
            .move-enter-active {
                animation-name: move-in;
                animation-duration: 2s;
            }
            .move-leave-active {
                /* 动画名称 */
                animation-name: move-in;    
                /* 动画持续时间 */
                animation-duration: 2s;
                /* 动画播放方向 */
                animation-direction: reverse;
            }
        </style>        
    </head>
    <body>
        <div id="app">
            <button @click="isShow=!isShow">clickMe</button>

            <!-- transition最终不转化为标签 name属性的值为 []-enter-active、[]-leave-active的前缀部分 -->
            <transition name="move">
                <h1 v-show="isShow" style="color:pink">小可爱</h1>
            </transition>             
        </div>

        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    isShow: true,
                },
            })
        </script>
    </body>
</html>